---
import ArticleMockHot from "./mock/ArticleMockHot.astro";
import ArticleMockNow from "./mock/ArticleMockNow.astro";
import IndexTabContentBox from "./tab/IndexTabContentBox.astro";
import IndexTabContentItem from "./tab/IndexTabContentItem.astro";
import IndexTabHeaderBox from "./tab/IndexTabHeaderBox.astro";
import IndexTabHeaderItem from "./tab/IndexTabHeaderItem.astro";
---
<div class="index-tab">
    <IndexTabHeaderBox>
        <IndexTabHeaderItem headerId="hot-tab" tabTarget="#hot" tabControl="hot"
            >热门</IndexTabHeaderItem
        >
        <IndexTabHeaderItem headerId="now-tab" tabTarget="#now" tabControl="now"
            >最新</IndexTabHeaderItem
        >
    </IndexTabHeaderBox>
    <IndexTabContentBox>
        <IndexTabContentItem
            ariaItemId="hot"
            ariaLabelledby="hot-tab"
            isHidden={false}
        >
            <ArticleMockHot />
        </IndexTabContentItem>
        <IndexTabContentItem
            ariaItemId="now"
            ariaLabelledby="now-tab"
            isHidden={true}
        >
            <ArticleMockNow />
        </IndexTabContentItem>
    </IndexTabContentBox>
</div>

<script>

    const tabItems = document.querySelectorAll(".tab-content-item");
       function changePage(tabItem, pageNum,buttonAs) {
        const mockPages = tabItem.querySelectorAll(".mock-page");
            mockPages.forEach((hidePage) => {
                hidePage.style.display = "none";
            });
      
        const targetPage = tabItem.querySelectorAll(".mock-page-" + pageNum);            
        targetPage.forEach((showPage) => {
                showPage.style.display = "block";
            });
        buttonAs.forEach((button) => {
            button.classList.remove("page-active");
        });

    }
    for (let i = 0; i < tabItems.length; i++) {
        const buttonAs = tabItems[i].querySelectorAll(".mock-page-a");
        if (buttonAs) {
            for (let j = 0; j < buttonAs.length; j++) {
                if(j==0)
            {
                changePage(tabItems[i],1,buttonAs);
                buttonAs[j].classList.add("page-active");
            }
                buttonAs[j].addEventListener("click", function (e) {
                    // 获取当前页码
                    const pageNum = buttonAs[j].innerHTML;
                    changePage(tabItems[i], pageNum,buttonAs);
                    buttonAs[j].classList.add("page-active");
                });
            }
        }
    }
</script>

<style is:global>
    .page-active {
        background-color: #fff!important;
        color: #333!important;
    }
</style>